import React, { Component } from 'react';
import { connect } from 'dva';
import { Modal, Form, Input, InputNumber, TreeSelect } from 'antd';
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;

class DepartmentModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
      }
    });
  };

  render() {
    const { children, depts, title, currentPid ,item} = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

    const treeData = (i) => {
      return i.map( d => {
        d.label = d.name;
        d.key = d.id_+'';
        d.value = d.id_+'';
        d.children = d.depts && d.depts.length > 0 ? treeData(d.depts) : [];
        return d;
      })
    }
    
    const loop = data => data.map((item) => {
      if (item.depts && item.depts.length) {
        return <TreeNode key={item.id_ + ''} title={item.name} value={item.id_ + ''}>{loop(item.depts)}</TreeNode>;
      }
      return <TreeNode key={item.id_ + ''} title={item.name} value={item.id_ + ''} />;
    });

    return (
        <span>           
            <Modal
               maskClosable= {this.props.maskClosable}
               confirmLoading= {this.props.confirmLoading}
               title={this.props.title}
               visible={this.props.visible}
               onOk={this.okHandler}
               onCancel={this.props.onCancel}
               key={this.props.newKey}
            >
              <Form layout='horizontal' onSubmit={this.okHandler}>
                <FormItem
                  {...formItemLayout}
                  label="部门名称"
                  hasFeedback
                >
                  {
                    getFieldDecorator('name', {
                      initialValue: item.name,
                      rules: [{
                        required: true, whitespace: true, message: '请输入部门名称',
                      }]
                    })(<Input />)
                  }
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="上级部门"
                  hasFeedback
                >
                  {
                    getFieldDecorator('pid', {
                      initialValue: typeof(item.pid_)=="undefined" ? currentPid+''  : item.pid_ ,
                      rules: [{
                        required: true, message: '请选择上级部门',
                      }]
                    })(
                      <TreeSelect
                        showSearch
                        treeNodeFilterProp='title'
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="请选择上级部门"
                        notFoundContent="无匹配结果"
                        allowClear
                        treeData={treeData(depts)}
                        treeDefaultExpandAll
                      >   
                      </TreeSelect>
                    )
                  }
                </FormItem>
                
                <FormItem
                  {...formItemLayout}
                  label="排序"
                  hasFeedback
                >
                  {
                    getFieldDecorator('sort', {
                      initialValue: item.sort,
                      rules: [{
                        required: true, message: '请输入排序',
                      }],
                    })(<InputNumber min={0} />)
                  }
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="备注"
                  hasFeedback
                >
                  {
                    getFieldDecorator('remark', {
                      initialValue: item.remark,
                      rules: [
                        { max: 100, message: '最多100个字符' }
                      ],
                    })(<Input rows={3} />)
                  }
                </FormItem>
              </Form>
            </Modal> 
        </span>
    );
  }
}

export default Form.create()(DepartmentModal);